<template>
  <div>
    <!-- 头部 -->
    <div id="classB">
      <span class="iconfont">&#xe6bc;</span>
      <h2>分类</h2>
      <p>
        <span class="iconfont">&#xf0112;</span>
        <i></i>
        <span class="iconfont">&#xe71e;</span>
      </p>
    </div>
    <!-- 搜索和导航 -->
    <div id="sectionA">
      <input type="text" class="iconfont" placeholder="&#xe610; 按内容搜索" />
    </div>
    <div id="mainA">
      <div class="left">
        <ul>
          <!-- <li>本周推荐</li> -->
          <li v-for="(item,idx) in classlist" :key="item.id" @click='changeGoods(idx)'>
            {{ item.catename }}
          </li>
        </ul>
      </div>
      <div class="right">
        <div class="on" v-for="ite in goodslist" :key="ite.id">
          <h3>{{ite.catename}}</h3>
          <ul >
            <li @click='getList(ite.id)'>
              <img :src="ite.img" alt="" />
              <span>{{ ite.catename }}</span>
            </li>
          </ul>
        </div>
      </div> 
    </div>
  </div>
</template>

<script>
//引入封装好的接口
import { getCates } from "../request/api";
export default {
  data() {
    return {
      classlist: [],
      goodslist:[],
    };
  },
  mounted() {
    //分类商品接口
    getCates()
      .then((res) => {
        console.log(res, "商品分类信息");
        if (res.data.code == 200) {
          this.classlist = res.data.list;
        }
      })
      .catch((err) => {
        console.log(err, "500");
      });
  },
  methods:{
    changeGoods(idx){
       getCates({idx})
       .then(res=>{
         console.log(res,'商品');
         if(res.data.code ==200){
           this.goodslist = res.data.list[idx].children;
          //  console.log(this.goodslist);
         }
       })
    },
    getList(cateid){
      this.$router.push('/list/'+cateid )
    }
  }
};
</script>

<style scoped>
@import '../assets/css/class.css';
</style>
